<template>
  <div class="todo" ref="todo">
    <p class="todo-content" @click="finished">{{ todo.content }}</p>
    <div class="todo-op">
      <i class="bi bi-pencil-square todo-op-item" @click="edit(todo.id)"></i>
      <i class="bi bi-trash todo-op-item" @click="deleteItem(todo.id)"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: ['todo'],
  methods: {
    deleteItem(content) {
      this.$emit('deleteItem', content)
    },
    edit(content) {
      this.$emit('editItem', content)
    },
    finished() {
      // console.log(this.$refs.todo)
      const todoObj = this.$refs.todo
      todoObj.classList.toggle('finished')
    },
  },
}
</script>

<style lang="scss" scoped>
.todo {
  display: flex;
  width: 100%;
  height: 40px;
  justify-content: space-between;
  padding: 10px;
  margin-top: 20px;
  border: 1px solid #3b36cc;
}
.todo > .todo-content {
  flex: 1;
  height: auto;
  text-align: left;
  padding-left: 20px;
  cursor: pointer;
}
.todo > .todo-op {
  width: 60px;
}
.todo > .todo-op > .todo-op-item {
  margin-right: 10px;
  cursor: pointer;
}
.finished {
  opacity: 0.4;
  text-decoration: line-through 3px solid;
}
</style>